<template>
  <div class="advance-container">
    <a-card class="card">
      <div class="card-header">
        <a-button type="link" @click="onChangeCount(3)">显示一行</a-button>
        <a-button type="link" @click="onChangeCount(6)">显示两行</a-button>
      </div>
      <a-divider />
      <AdvanceForm ref="formRef" :formCount="12" />
    </a-card>
  </div>
</template>
<script lang='ts' setup>
import AdvanceForm from '@/components/form/AdvancedForm.vue';
import { ref } from 'vue';
const formRef = ref();
const onChangeCount = (count: number) => {
  formRef.value.changeCount(count);
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.advance-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    min-width: 800px;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }

  .card-header {}
}
</style>